<template>
	<div class="warp-all" @mouseover="handleHover" @click="handleClick">
		<div :class="getClass()"> </div>
		<van-field class="searchBtn uisearch" v-model="value" @input="doinput" @mouseover="handleHover"
			@mouseleave="handleInputleave" label="" left-icon="search" custom-class="custom-input-bg"
			placeholder="Search" :style="{ color: 'white' }" />
	</div>

</template>
<script>
	var getUa = () => {
		return 'Mac' // 仅仅 Mac
		var ua = (v) => navigator.userAgent.includes(v) ? v : false;
		return ua('Win') || ua('Mac') || ua('Linux') || 'other';
	}
	var res
	var action = 'SearchBarBg'
	export default {
		data() {
			return {
				system: 'Ios',
				value: '',
				them: 'Dark',
				active: 'Normal',
				fill: '#767680',
			}
		},
		methods: {
			// 这里还要加 系统ui 选项
			getClass() {
				var tmp = [getUa().toLocaleLowerCase(), action, this.them, this.active]
				console.log(tmp.join(""));
				return 'element ' + tmp.join("")
			},
			/*  事件 用于切换 类名 */
			doinput() {
				this.active = 'Pressed'
				this.$emit("search", this.value)
			},
			handleHover() {
				this.active = 'Hover'
			},
			handleClick() {
				this.active = 'Pressed'
			},
			handleInputleave() {
				this.active = 'Normal'
			}
		}
	}
</script>

<style scoped>
	.warp-all {
		width: 300px;
		position: relative;
	}

	.warp-bg {
		display: flex;
		align-items: center;
		background-color: #f0f0f0;
		position: absolute;
		width: 300px;
	}

	.element {
		height: 28px;
		width: 100%;
		margin: 0 auto;
		position: absolute;
		background-color: #FFFFFF00;
		border-image-repeat: round;
	}

	   
	.macSearchBarBgDarkNormal {
		border-image-source: url('../assets/macSearchBarBgDarkNormal.svg');
		border-image-width: 27px;
		border-image-slice: 17;
	}

	.macSearchBarBgDarkHover {
		border-image-source: url('../assets/macSearchBarBgDarkHover.svg');
		border-image-width: 27px;
		border-image-slice: 17;
	}

	.macSearchBarBgDarkPressed {
		border-image-source: url('../assets/macSearchBarBgDarkPressed.svg');
		border-image-width: 27px;
		border-image-slice: 17;
	}

	.main-input {
		width: calc(100% - 20px);
		position: absolute;
		height: 22px;
		margin: 7px 10px;
		background: transparent;
		border: 0;
		padding: 0;
		outline: none;
	}

	input:focus {
		border: 0px solid #ccc;
	}

	.warp-all {
		width: auto;
	}
</style>